<template>
	<view class="shopping_order">
		<Navbar>订单详情</Navbar>
		<scroll-view scroll-y class="scroll_view">
			<view class="status" v-if="pay_status==0">
				<view class="icon">待支付</view>
				<view class="tips">倒计时 {{date}}</view>
			</view>
			<view class="status" v-else-if="pay_status==1">
				<view class="icon success_tips">支付成功</view>
				<view class="tips">已转入您的个人中心,请查看</view>
			</view>
			<view class="status" v-else>
				<view class="icon fail">订单超时</view>
			</view>
			<view class="address">
				<view class="address_view" @click="router(`/pages/shopping/address`)">
					<image :src="`${baseImageUrl}/add/s4.png`"></image>
					<view class="address_deta" v-if="address.id">
						<view class="address_info">
							<view class="name">{{address.name}}</view>
							<view class="phone">{{address.phone}}</view>
						</view>
						<view class="text_deta">
							{{address.province}}{{address.city}}{{address.area}}{{address.address}}
						</view>
					</view>
					<text class="tips" v-else>请选择地址</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="logistics" v-if="logistics_no">
				<image src="@/static/images/add/1121_2.png"></image>
				<view class="logistics_view">{{logistics_no}}</view>
				<view class="copy" @click="copy(logistics_no)">复制</view>
			</view>
			<view class="content">
				<view class="info">
					<image :src="cover" class="cover"></image>
					<view class="info_view">
						<view class="shopping_name">{{name}}</view>
						<view class="synopsis">{{synopsis}}</view>
						<view class="shopping_price">
							<view v-if="price>0">
								<text class="unit">￥</text>
								<!-- <image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image> -->
								<text>{{price}}</text>
							</view>
							<view v-if="price_silver>0">
								<!-- <image :src="`${baseImageUrl}/add/s1.png`"></image> -->
								<image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image>
								<text>{{price_silver}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="sub_title">
					<image :src="`${baseImageUrl}/home/xs.png`"></image>
					<text>订单详情</text>
				</view>
				<view class="item">
					<view class="key">购买数量：</view>
					<view class="value">X{{number}}</view>
				</view>
				<view class="item">
					<view class="key">订单金额：</view>
					<view class="total_price">
						<view v-if="price>0">
							<text class="unit">￥</text>
							<!-- <image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image> -->
							<text>{{total_price}}</text>
						</view>
						<view v-if="price_silver>0">
							<!-- <image :src="`${baseImageUrl}/add/s1.png`"></image> -->
							<image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image>
							<text>{{total_price_silver}}</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="key">订单编号：</view>
					<view class="value">{{order_no}}</view>
				</view>
				<view class="item">
					<view class="key">订单时间：</view>
					<view class="value">{{created_at}}</view>
				</view>
			</view>
			<view class="title">
				<image :src="`${baseImageUrl}/home/xs.png`"></image>
				<text>订单详情</text>
			</view>
			<view class="u_parse">
				<u-parse :content="content" :previewImg="false"></u-parse>
			</view>
			<view class="btn_view">
				<view class="cancel" @click="cancel">取消</view>
				<view class="confirm" @click="show=true">立即购买</view>
			</view>
			<!-- <view class="btn_view" v-if="pay_status==0">
				<view class="cancel" @click="cancel">取消</view>
				<view class="confirm" @click="show=true">立即购买</view>
			</view>
			<view class="btn_view" v-else>
				<view class="cancel" @click="redirectRouter(0)">返回大厅</view>
			</view> -->
		</scroll-view>
		<!-- 	<view class="btn_view">
			<view class="confirm" @click="router('/pages/shopping/my_order')">我的订单</view>
		</view> -->
		<u-popup :show="show" mode="bottom" :round="10">
			<PayTypeTwo :list="pay_mode" :id="id" @close="show=false" @success="getDeta" />
		</u-popup>
	</view>
</template>

<script>
	import {
		shopOrderInfo,
		shopOrderCancel
	} from '@/request/api.js';
	import PayTypeTwo from "@/components/common/PayTypeTwo.vue";
	export default {
		components: {
			PayTypeTwo
		},
		data() {
			return {
				id: null,
				number: "",

				address: {
					id: null,
					name: "",
					phone: "",
					province: "",
					city: "",
					area: "",
					address: "",
				},
				logistics_no: "",

				cover: "",
				name: "",
				synopsis: "",
				price: "",
				price_silver: "",
				content: "",

				total_price: "",
				total_price_silver: "",
				order_no: "",
				created_at: "",

				pay_password: "",

				pay_status: -1,
				end_pay_time: "",
				date: "",

				show: false,
				pay_mode: {},
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getDeta();
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		onHide() {
			clearTimeout(this.timer);
		},
		methods: {
			async getDeta() {
				let {
					info,
					pay_mode
				} = await shopOrderInfo({
					id: this.id
				});
				const address = info.address;
				this.address = address;

				this.number = info.number;

				this.cover = info.product.cover;
				this.name = info.product.name;
				this.synopsis = info.product.synopsis;
				this.price = info.product.price;
				this.price_silver = info.product.price_silver;
				this.content = info.product.content;

				this.order_no = info.order_no;
				this.created_at = info.created_at;
				this.logistics_no = info.logistics_no;

				this.total_price = info.total;
				this.total_price_silver = info.total_silver;

				this.pay_mode = pay_mode;

				this.pay_status = info.pay_status;
				this.end_pay_time = info.end_pay_time;
				if (this.pay_status == 0) {
					this.handerTime();
				}
			},
			handerTime() {
				let date = this.end_pay_time;
				if (date == 0) return;
				let current = parseInt(new Date().getTime() / 1000);
				if (current >= date) {
					this.date = "00:00:00";
					clearTimeout(this.timer);
					this.timer = setTimeout(this.getDeta, 5 * 1000);
				} else {
					let surplus = date - current;
					let hour = parseInt(surplus / 60 / 60 % 24);
					hour = hour < 10 ? '0' + hour : hour;

					let mm = parseInt(surplus / 60 % 60);
					mm = mm < 10 ? '0' + mm : mm;

					let ss = parseInt(surplus % 60);
					ss = ss < 10 ? '0' + ss : ss;
					this.date = `${hour}:${mm}:${ss}`;

					this.timer = setTimeout(this.handerTime, 1000);
				};
			},
			async cancel() {
				await shopOrderCancel({
					id: this.id
				});
				this.$u.toast("操作成功");
			}
		}
	}
</script>

<style scoped lang="scss">
	.shopping_order {
		height: 100vh;
		background: #29170D;

		.scroll_view {
			height: calc(100vh - #{$navbarHeight});
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.status {
				padding-bottom: 48rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.icon {
					width: 240rpx;
					height: 240rpx;
					color: #38880F;
					font-size: 40rpx;
					font-weight: 400;
					font-family: LiSu;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					background: url(#{$baseImageUrl}/common/time2.png) no-repeat;
					background-size: 100% 100%;

					&.fail {
						color: #CA372E;
						background: url(#{$baseImageUrl}/common/unlock_fail.png) no-repeat;
						background-size: 100% 100%;
					}

					&.success_tips {
						background: url(#{$baseImageUrl}/common/success.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.tips {
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
					margin-top: 20rpx;
				}

				.success_tips {
					width: 240rpx;
					height: 240rpx;
					color: #38880F;
					font-size: 40rpx;
					font-weight: 400;
					font-family: LiSu;
					margin: 0 auto;
					background: url(#{$baseImageUrl}/common/success.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: center;
					align-items: flex-end;
				}

				.tips {
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
				}
			}

			.logistics {
				width: 100%;
				height: 146rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/add/bg5.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				.logistics_view {
					flex: 1;
					color: #494338;
					font-size: 40rpx;
					font-weight: 400;
					font-family: LiSu;
					padding: 0 20rpx;
					box-sizing: border-box;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.copy {
					color: #494338;
					font-size: 28rpx;
					font-weight: 400;
					font-family: LiSu;
				}
			}

			.address {
				width: 100%;
				height: 146rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/add/bg5.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.address_view {
					flex: 1;
					display: flex;
					align-items: center;
					overflow: hidden;

					image {
						width: 50rpx;
						height: 50rpx;
					}

					.tips {
						color: #494338;
						font-size: 40rpx;
						font-weight: 400;
						font-family: LiSu;
						padding-left: 30rpx;
						box-sizing: border-box;
					}

					.address_deta {
						width: 100%;
						padding-left: 30rpx;
						box-sizing: border-box;
						overflow: hidden;

						.address_info {
							display: flex;
							align-items: center;

							.name {
								color: #494338;
								font-size: 40rpx;
								font-weight: 400;
								font-family: LiSu;
							}

							.phone {
								color: #494338;
								font-size: 30rpx;
								font-weight: 400;
								font-family: LiSu;
							}
						}

						.text_deta {
							width: 100%;
							color: #494338;
							font-size: 30rpx;
							font-weight: 400;
							font-family: LiSu;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}
			}

			.content {
				width: 100%;
				height: 526rpx;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				background: url(@/static/images/add/1121_1.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.info {
					display: flex;

					.cover {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}

					.info_view {
						flex: 1;
						padding: 15rpx 0 10rpx 35rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						overflow: hidden;

						.shopping_name {
							color: #494338;
							font-size: 36rpx;
							font-weight: 400;
							font-family: LiSu;
						}

						.synopsis {
							color: #494338;
							font-size: 24rpx;
							font-weight: 500;
						}

						.shopping_price {
							display: flex;
							align-items: center;

							&>view {
								display: flex;
								align-items: center;

								&:first-child {
									margin-right: 10rpx;
								}

								.unit {
									font-size: 24rpx;
									font-family: LiSu;
									font-weight: 400;
									color: #494338;
								}

								image {
									width: 38rpx;
									height: 38rpx;

									&.price_icon {
										width: 30rpx;
										height: 30rpx;
									}
								}

								text {
									color: #494338;
									font-size: 32rpx;
									font-weight: 400;
									font-family: LiSu;
									padding-left: 6rpx;
									box-sizing: border-box;
								}
							}
						}
					}
				}

				.sub_title {
					margin: 10rpx 0;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						line-height: 32rpx;
						color: #494338;
						font-size: 32rpx;
						font-weight: 400;
						font-family: SimSun;
						padding-left: 12rpx;
						box-sizing: border-box;
					}
				}

				.item {
					display: flex;

					.key {
						color: #494338;
						font-size: 32rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					.value {
						color: #494338;
						font-size: 32rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					.total_price {
						display: flex;
						align-items: center;

						&>view {
							display: flex;
							align-items: center;

							&:first-child {
								margin-right: 10rpx;
							}

							.unit {
								color: #494338;
								font-size: 32rpx;
								font-weight: 400;
								font-family: SimSun;
							}

							image {
								width: 38rpx;
								height: 38rpx;

								&.price_icon {
									width: 30rpx;
									height: 30rpx;
								}
							}

							text {
								color: #494338;
								font-size: 32rpx;
								font-weight: 400;
								font-family: SimSun;
								padding-left: 6rpx;
								box-sizing: border-box;
							}
						}
					}
				}
			}

			.title {
				margin: 30rpx 0;
				padding-left: 16rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					line-height: 32rpx;
					color: rgba(255, 255, 255, 0.5);
					font-size: 32rpx;
					font-weight: 400;
					font-family: SimSun;
					padding-left: 12rpx;
					box-sizing: border-box;
				}
			}

			.u_parse {
				color: #fff;
				font-family: SimSun;
				padding-left: 16rpx;
				box-sizing: border-box;
			}
		}

		.btn_view {
			width: 100%;
			display: flex;
			justify-content: center;

			view {
				width: 210rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				margin: 0 16rpx;
			}

			.cancel {
				background: url(#{$baseImageUrl}/common/btn2.png) no-repeat;
				background-size: 100% 100%;
			}

			.confirm {
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>